<template>
    <div class="set-wrapper">
        <div class="main">
            <mt-radio title="类型选题：" :options="typeopt"></mt-radio>
            <mt-field label="错误率" placeholder="请输入" type="number">%</mt-field>
            <mt-radio title="查看答案：" :options="lookopt"></mt-radio>
            <mt-radio title="错题类型：" :options="wrongopt"></mt-radio>
            <div class="test-box">
                <mt-field label="题库：" v-model="form.paper" placeholder="请选择科室" :disabled="true" @click.native.capture="popupVisible = true"></mt-field>
                <mt-field label=" " v-model="form.paper" placeholder="请选择子科室" :disabled="true" @click.native.capture="popupVisible = true"></mt-field>
                <mt-field label=" " v-model="form.paper" placeholder="请选择出版社" :disabled="true" @click.native.capture="popupVisible = true"></mt-field>
                <mt-field label=" " v-model="form.paper" placeholder="请选择年份" :disabled="true" @click.native.capture="popupVisible = true"></mt-field>
                <mt-field label=" " v-model="form.paper" placeholder="请选择历史试卷" :disabled="true" @click.native.capture="popupVisible = true"></mt-field>
                <mt-field label=" " v-model="form.paper" placeholder="请输入关键词"></mt-field>
            </div>
        </div>
        <div class="btn-box">
            <mt-button type="danger" size="large">取消</mt-button>
            <mt-button type="primary" size="large">确定</mt-button>
        </div>
        <mt-popup v-model="popupVisible" popup-transition="popup-fade" position="bottom" class="mint-popup">
            <!-- // 此处slots为动态传入的值，通过computed来处理，数据通过vuex管理，由于数据为对象数组，需设置 value-key 属性来指定显示的字段名 -->
            <mt-picker :slots="slots" @change="onDateChange" :show-toolbar="true" value-key="className">
                <mt-button @click="handleCancel" class="cancel">取消</mt-button>
                <mt-button @click="handleConfirm" class="sure">确认</mt-button>
            </mt-picker>
        </mt-popup>
    </div>
</template>

<style>
    .set-wrapper{
        padding-bottom: 20px;
    }
    .main{
        text-align: left;
    }
    .mint-radiolist-title{
        font-size: 14px;
        color: #000;
    }
    .tworadio .mint-cell{
        width: 50%;
        float: left;
        padding: 0;
    }
    .btn-box{
        text-align: center;
        margin: 60px 0px 0px;
    }
    .btn-box button{
        width: 42%;
        display: inline-block;
        margin: 0 2%;
    }
    input[type="text" i]:disabled{
        background-color: #fff;
    }
    .mint-popup{
        width: 100%;
    }
    .picker-item{
        text-align: center;
    }
    .sure{
        position: absolute;
        right: 0px;
        background: #fff;
        color: #26a2ff;
        box-shadow: none;
    }
    .cancel{
        position: absolute;
        left: 0px;
        background: #fff;
        color: #26a2ff;
        box-shadow: none;
    }
    .mint-button::after{
        background: #fff;
    }
    input:focus{
        border: none;
    }
</style>

<script>
    export default {
        name:"set",
        data() {
            return {
                typeopt: [
                    {label: '全部', value: 0},
                    {label: '仅错题', value: 1},
                ],
                lookopt: [
                    {label: '全部', value: 0},
                    {label: '仅错题', value: 1},
                ],
                wrongopt: [
                    {label: '所有错题', value: 0},
                    {label: '练习错题', value: 1},
                    {label: '考试错题', value: 2},
                ],
                popupVisible: false,
                form: {
                    paper: '',
                },
                slots: [
                    {
                        flex: 1,
                        values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
                        className: 'slot1',
                        textAlign: 'right'
                    }, 
                ],
                testpaper: [],  //当前选中的试卷
            };
        },
        methods: {
            onDateChange (picker, values) {
                // console.log(picker);
                // console.log(values);
                this.testpaper = values;
            },
            //确认  试卷选择
            handleConfirm(){
                console.log('确认');
                this.popupVisible = false;
                this.form.paper = this.testpaper;
            },
            //取消  选择
            handleCancel(){
                console.log('取消');
                this.popupVisible = false;
                this.form.paper = '';
            },
            
        },
        mounted (){
            document.title = "一键练习";
        },
        beforeCreate: function() {
        	

		}
    }
</script>